<template>
  <div class="recommend-mv">
    <div class="recommend-mv-list"  v-for="(item,index) in 4" :key="index">
      <div class="recommend-mv-list-title">
        内地精选
        <div class="recommend-mv-list-title-icon"></div>
      </div>
      <div class="recommend-mv-list-body">
        <div class="recommend-mv-list-body-item">
          <img src="" alt="" class="recommend-mv-list-body-item-img" />
          <div class="recommend-mv-list-body-item-info">
            <span>i</span>
            <span>金泰妍</span>
          </div>
        </div>
        <div class="recommend-mv-list-body-item">
          <img src="" alt="" class="recommend-mv-list-body-item-img" />
          <div class="recommend-mv-list-body-item-info">
            <span>i</span>
            <span>金泰妍</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent } from "vue";
export default defineComponent({
  name: "RecommendMv",
});
</script>

<style lang='scss' scoped>
.recommend-mv {
  height: 100%;
  overflow: auto;
  .recommend-mv-list {
    color: #fff;
    height: 185px;
    padding: 15px;
    border-radius: 10px;
    background-image: linear-gradient($brand-primary 0%, #ffffff 40%);
    [system-color = "pink"] & {
       background-image: linear-gradient($brand-primary-pink 0%, #ffffff 40%);
    }
    [system-color = "purple"] & {
       background-image: linear-gradient($brand-primary-purple 0%, #ffffff 40%);
    }
    [system-color = "yellow"] & {
       background-image: linear-gradient($brand-primary-yellow 0%, #ffffff 40%);
    }
    .recommend-mv-list-title {
      padding: 0px 0 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      font-weight: 600;
      .recommend-mv-list-title-icon {
        width: 15px;
        height: 15px;
        background-image: url("../images/jiantou_white.svg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }
    .recommend-mv-list-body {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .recommend-mv-list-body-item {
        overflow: hidden;
        width: 167px;
        border-radius: 5px;
        background: #fff;
        @include systemBoxShaowStyle(2px,2px,8px);
        .recommend-mv-list-body-item-img {
          width: 100%;
          height: 100px;
          background: #f2f2f2;
        }
        .recommend-mv-list-body-item-info {
          display: flex;
          flex-direction: column;
          padding: 3px;
          justify-content: space-between;
          align-items: flex-start;
          font-size: 10px;
          color: #707070;
        }
      }
    }
  }
}
</style>